<template>
    <!-- 深度思考切换：只要检测到 <think> 标签就显示 -->
    <div v-if="parsedContent.hasThink" class="think-section" :class="{
        'think-end': parsedContent.thinkCompleted && showThink,
        'showThink': showThink,
        'noborder': !parsedContent.thinkCompleted,
        'think-on': !parsedContent.thinkCompleted && !showThink && parsedContent.thinkContent
    }">
        <div class="think-btn" @click="handleThinkBtnClick" v-if="parsedContent.thinkContent">
            <div>
                {{ parsedContent.thinkCompleted ? "已完成思考" : "思考中..." }}
                <span v-if="parsedContent.thinkTime || thinkTime" class="think-time">
                    ({{ parsedContent.thinkTime || thinkTime }}s)
                </span>
            </div>
            <img src="@/assets/images/chat/ai_icon12.png" alt="" class="think-icon" v-if="parsedContent.thinkContent">
        </div>
        <div v-show="showThink" class="think-content">
            <template v-if="parsedContent.thinkContent">
                <MarkdownView :content="parsedContent.thinkContent" />
            </template>
        </div>
    </div>
</template>
<script setup>
import { ref, computed, watch } from 'vue';
import MarkdownView from './MarkdownView/index.vue'
const props = defineProps({
    message: {
        type: Object,
        required: true,
        default: () => ({}),
    },
    parsed: {
        type: Object,
        required: true,
        default: () => ({}),
    },
    isStreaming: {
        type: Boolean,
        default: false
    },
    thinkTime: {
        type: String,
        default: ''
    }
})
const showThink = ref(false);
const userToggledThink = ref(false);
const parsedContent = computed(() => props.parsed);


watch(
    () => props.message?.id,
    () => {
        showThink.value = false;
    }
);
// 根据流式状态与是否存在思考内容自动展开/收起
watch(
    () => ({
        thinkCompleted: !!parsedContent.value.thinkCompleted,
        hasThink: !!parsedContent.value.thinkContent,
        isStreaming: props.isStreaming
    }),
    ({ thinkCompleted, hasThink, isStreaming }) => {
        if (!hasThink) return;

        if (!isStreaming && !userToggledThink.value) {
            showThink.value = true;
        }
        if (thinkCompleted && !userToggledThink.value) {
            showThink.value = false;
        }
    },
    { immediate: true }
);

// 处理思考按钮点击事件
const handleThinkBtnClick = () => {
    showThink.value = !showThink.value;
    userToggledThink.value = true;
}

</script>
<style scoped lang="scss">
// 深度思考样式
.think-section {
    width: 100%;
    border: 1px solid transparent;
    border-radius: 6px;
    margin-bottom: 10px;

    .think-content {
        margin-top: 5px;
        padding: 10px 12px;
    }

    .think-placeholder {
        color: #6b7280;
        font-size: 13px;
    }

    .think-btn {
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 16px;
        padding: 5px 0;
        width: 220px;
        border: 1px solid #E8E8E8;
        border-radius: 6px;
        padding: 10px;

        .think-icon {
            width: 16px;
            height: 16px;
        }

        span {
            padding-left: 3px;
        }

        .think-time {
            color: #6b7280;
            font-size: 14px;
            margin-left: 5px;
        }

    }

    &.showThink {
        border-color: #E8E8E8;

        .think-btn {
            width: 100%;
            border-color: transparent;
        }
    }

    &.think-end {
        border-color: #E8E8E8;

        .think-btn {
            width: 100%;
            border-color: transparent;
        }
    }

    &.noborder {
        border-color: transparent;

        .think-btn {
            width: 100%;
            border-color: transparent;
        }
    }

    &.think-on {
        border-color: transparent;

        .think-btn {
            width: 220px;
            border-color: #E8E8E8;
        }
    }
}
</style>
